<template>
  <header>
    <section>
      <label for="title">ToDoList</label>
      <input type="text" id="title" placeholder="添加ToDo" @keyup.enter="add" autocomplete="off" />
    </section>
  </header>
</template>

<script>
import { nanoid } from "nanoid";
export default {
  props: ["addTodo"],
  methods: {
    add(e) {
      const todo = { id: nanoid(), title: e.target.value, done: false };
      this.addTodo(todo);
      e.target.value = "";
    },
  },
};
</script>

<style scoped>
header {
  height: 50px;
  background: #333;
  background: rgba(47, 47, 47, 0.98);
}
section {
  display: flex;
  margin: 0 auto;
  justify-content: center;
}
label {
  padding-right: 100px;
  width: 100px;
  line-height: 50px;
  color: #ddd;
  font-size: 24px;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
header input {
  width: 30%;
  height: 24px;
  margin-top: 12px;
  text-indent: 10px;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24),
    0 1px 6px rgba(0, 0, 0, 0.45) inset;
  border: none;
}
input:focus {
  outline-width: 0;
}
</style>
